<template>
	<view class="siteAdd">
		<view class="siteAdd-top">
			<view class="siteAdd-inp">
				<up-input class="inp" border="surround" v-model="value" @change="change"></up-input>
				<view v-show="show" class="suo">
					<image src="../../../../static/image/搜索.png" mode="scaleToFill" />
					搜索
				</view>
			</view>
			<view class="siteAdd-city">
				<view class="siteAdd-city-item">
					<view>当前城市</view>
					<text>北京</text>
				</view>
				<view class="siteAdd-city-item">
					<view>定位城市</view>
					<text>北京</text>
				</view>
			</view>
		</view>

		<up-index-list :index-list="ZiMu">
			<template v-for="(item, index) in cityList">
				<!-- #ifdef APP-NVUE -->
				<up-index-anchor :text="ZiMu[index]"></up-index-anchor>
				<!-- #endif -->
				<up-index-item>
					<!-- #ifndef APP-NVUE -->
					<up-index-anchor :text="ZiMu[index]"></up-index-anchor>
					<!-- #endif -->
					<view class="list-cell" v-for="(cell, index) in item">
						{{ cell }}
					</view>
				</up-index-item>
			</template>
		</up-index-list>

	</view>
</template>

<script setup>
import { ref } from "vue"
import city from "./city.js"
const value = ref("")
let show = ref(true)
let change = () => {
	show.value = value.value !== "" ? false : true
}
// 拼音
let ZiMu = ref([])
city.city.forEach(item => {
	ZiMu.value.push(item.title.substring(0, 1))
})
ZiMu.value = Array.from(new Set(ZiMu.value))


city.city.forEach((item) => {
	item.shen = []
	ZiMu.value.forEach(list => {
		if (item.title == list) {
			item.lists.forEach((list1) => {
				item.shen.push(list1.city)
			})
		}
	})
})
let cityList = ref([])
city.city.forEach((item) => {
	cityList.value.push(item.shen)
})
console.log(cityList.value);

</script>

<style lang="scss" scoped>
.list-cell {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 24rpx;
	color: #323233;
	font-size: 14px;
	line-height: 24px;
	background-color: #fff;
}

.siteAdd {
	height: calc(100vh - 91rpx);
	background-color: #f5f5f5;
	box-sizing: border-box;
}

.siteAdd-top {
	padding-top: 30rpx;
}

.siteAdd-inp {
	margin-left: 30rpx;
	height: 70rpx;
	display: flex;
	align-items: center;
	flex: 1;
	background-color: #fff;
	border-radius: 30rpx;
	font-size: 24rpx;
	position: relative;
	margin-right: 30rpx;

	.suo {
		position: absolute;
		left: 45%;
		color: #d7d7d7;

		.inp {
			text-align: left !important;
		}

		image {
			width: 30rpx;
			height: 30rpx;
			vertical-align: middle;
			margin-top: -8rpx;
		}
	}
}

.siteAdd-city {
	display: flex;
	background-color: #fff;
	padding: 30rpx;
	margin: 30rpx 0;
	justify-content: space-between;
	.siteAdd-city-item{
		display: flex;
		width: 50%;
		justify-content: space-evenly;
		text{
			color:#2d8cfe;
		}
	}
}
</style>